<template>
  <div class="blogs">
    <div class="content-header">
      <h1>博客管理<small>发布博客</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item >后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>博客管理</el-breadcrumb-item>
        <el-breadcrumb-item>发布博客</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--中间内容-->
    <div class="app-container"  
	v-loading="loading"
	element-loading-text="玩命提交中..."
	element-loading-spinner="el-icon-loading"
	element-loading-background="rgba(0, 0, 0, 0.8)"
	>
		<div class="box">
			<div class="home">
			  <mavon-editor :toolbars="toolbars" v-model="content" :ishljs="true" codeStyle="monokai-sublime" @imgAdd="$imgAdd"  ref='md'/>
			</div>
			<br/>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
			class="demo-ruleForm">
			  <el-form-item label="标题" prop="title">
			    <el-input style="width: 75%;" v-model="ruleForm.title"></el-input>
			  </el-form-item>
			  <el-form-item label="来源" prop="resource">
			    <el-select v-model="ruleForm.resource" placeholder="请选择来源">
			      <el-option label="原创" value="原创"></el-option>
				  <el-option label="转载" value="转载"></el-option>
			      <el-option label="翻译" value="翻译"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="文章类型" prop="type_">
			    <el-radio-group v-model="ruleForm.type_">
					<el-radio :label="item.type" :key="item.id" v-for="(item,index) in type_list"></el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item label="文章标签" prop="tag">
			    <el-checkbox-group v-model="ruleForm.tag" >
			      <el-checkbox :label="item.tag" :key="item.id"  v-for="item in tag_list"></el-checkbox>
			    </el-checkbox-group>
			  </el-form-item>
			  <el-form-item label="文章摘要" prop="desc_">
			    <el-input style="width: 75%;" type="textarea" v-model="ruleForm.desc_"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
			    <el-button type="danger" @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
	    content: "这里是markdown编辑的内容",
	    toolbars: {
		bold: true, // 粗体
		italic: true, // 斜体
		header: true, // 标题
		underline: true, // 下划线
		strikethrough: true, // 中划线
		mark: true, // 标记
		superscript: true, // 上角标
		subscript: true, // 下角标
		quote: true, // 引用
		ol: true, // 有序列表
		ul: true, // 无序列表
		link: true, // 链接
		imagelink: true, // 图片链接
		code: true, // code
		table: true, // 表格
		fullscreen: true, // 全屏编辑
		readmodel: true, // 沉浸式阅读
		htmlcode: true, // 展示html源码
		help: true, // 帮助
		undo: true, // 上一步
		redo: true, // 下一步
		trash: true, // 清空
		save: true, // 保存（触发events中的save事件）
		navigation: true, // 导航目录
		alignleft: true, // 左对齐
		aligncenter: true, // 居中
		alignright: true, // 右对齐
		subfield: true, // 单双栏模式
	 	preview: true // 预览
	    },
		ruleForm: {
		  title: '',
		  resource: '',
		  type_: "",
		  tag: [],
		  desc_: '',
		  content_html: '',
		  content_markdown:'',
		  user_id:''
		},
		rules: {
		  title: [
			{ required: true, message: '请输入标题', trigger: 'blur' },
			{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
		  ],
		  resource: [
			{ required: true, message: '请选择来源', trigger: 'change' }
		  ],
		  type_: [
			 { required: true, message: '请选择文章类型', trigger: 'change' }
		  ],
		  tag:[
			  { type: 'array', required: true, message: '请至少选择一个标签', trigger: 'change' }  
		  ],
		  desc_: [
			{ required: true, message: '请简述你的文章', trigger: 'blur' },
			{ min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
		  ]
		},
		//初始化时从后端取得type_list和tag_list
		type_list:[
			// {id:0, type: '汽车'},
			// {id:1, type: '计算机'},
		],
		tag_list:[
			// {id:0, tag:'Mysql'},
			// {id:1, tag: '病理学'},
			// {id:2, tag: 'java'},
		],
		loading:false
    };
  },
  methods: {
	submitForm(formName) {
		var that=this
	  this.$refs[formName].validate((valid) => {
		if (valid) {
			//权限判断
			var user=JSON.parse(sessionStorage.getItem("user_info"))
			//权限为1或者2的可以发博文
			if(user.power==2||user.power==1){
				//将值赋值给that.ruleForm便于返回！！！
				//这是取得markdown的markdown文本
				that.ruleForm.content_markdown=that.$refs.md.d_value
				//这是谁创建的博文
				that.ruleForm.user_id=user.id
				//这是取得markdown的html文本
				that.ruleForm.content_html=that.$refs.md.d_render
				console.log(that.ruleForm)
				that.loading=true;
				axios.post("http://"+that.$store.state.host+":8181/blog/saveBlog/",{
					blog_data:that.ruleForm
				}).then(function(res){
					that.loading=false;
					//这里是标题、类型、标签置空
					that.$refs[formName].resetFields();
					//这里是markdown编辑器为原来的样子
					that.content="这里是markdown编辑的内容";
					that.$message.success("插入成功!");
				})
			}else{
				that.$message.warning('你不具有该权限!');
			}
		} else {
		  that.$message.error("请校验好数据格式!");
		  return false;
		}
	  });
	},
	resetForm(formName) {
	  this.$refs[formName].resetFields();
	},
	//上传图片
	$imgAdd(pos, $file){
		var that=this
		//进行权限判断
		var user=JSON.parse(sessionStorage.getItem("user_info"))
		if(user.power==2||user.power==1){
			// 第一步.将图片上传到服务器.
			var formdata = new FormData();
			formdata.append('file', $file);
			axios({  //"+ that.$store.state.host +"   localhost
				url:"http://"+ that.$store.state.host +":8282/upload/image",
				method:'post',
				data:formdata,
				headers: { 'Content-Type': 'multipart/form-data' },
			}).then(function(res){
				console.log(res)
				//that.$refs.md.$img2Url(pos, "Linux端的图片地址!!!!");
				//说明图片上传服务器成功
				if(res.data.status==true){
					//成功就不提示了!!!!
					that.$refs.md.$img2Url(pos, res.data.map.src);
				}else{
					that.$message.error('图片上传服务器失败(图片大小<=5MB)!');
				}
			})
		}else{
			that.$message.warning('你不具有上传图片到服务器的权限，图片未上传至服务器!');
		}
	}
  },
  //初始化函数     主要是得到所有的类型名与标签名
  created() {
	var that=this
	//得到所有的标签名
  	axios.get("http://"+that.$store.state.host+":8181/tag/findAllTag").then(function(res){
		that.tag_list=res.data.map.data
	});
	//得到所有的类别名
	axios.get("http://"+that.$store.state.host+":8181/type/findAllType").then(function(res){
		that.type_list=res.data.map.data
	})
  }
};
</script>

<style>
	
	.el-radio-group{
		width: 80%;
	}
	
	.el-checkbox-group{
		width: 80%;
	}
	
</style>

